<template>
  <div>
    <div class="search-result-container">
      <div class="result-count-row">
        <div
          class="result-count font-weight-bold"
          :class="windowWidth <= 600 ? 'subtitle-1' : 'text-h5'">
          {{ showResultCount }}
        </div>
        <div class="filter-btn">
          <v-btn
            depressed
            color="primary"
            :small="windowWidth <= 600"
            :outlined="!showFilter"
            v-if="searchType === 0"
            @click="switchFilter">
            <v-icon size="16">
              fas fa-filter
            </v-icon>
            筛选
          </v-btn>
        </div>
        <div class="sort-btn">
          <v-menu offset-y rounded="lg">
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                depressed
                color="primary"
                :small="windowWidth <= 600"
                v-bind="attrs"
                v-on="on">
                {{ currentSorted }}
                <v-icon
                  size="10">
                  fas fa-chevron-down
                </v-icon>
              </v-btn>
            </template>
            <v-list dense>
              <v-list-item
                v-for="(item, index) in sortList"
                :key="item"
                @click="selectSortType(index)">
                <v-list-item-title>{{ item }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
      </div>
      <searchCourses
          ref="searchCourses"
        v-model="searchValue"
        v-if="searchType === 0"
        :showFilter="showFilter"
        @switchFilter="handleSwitchFilter"/>
      <searchTeachers
        v-model="searchValue"
        v-else-if="searchType === 1"/>
      <searchBlog
          v-model="searchValue"
          v-else-if="searchType === 2"
      />
    </div>
  </div>
</template>

<script>
    import searchCourses from "@/views/search/searchResult/searchCourses/searchCourses";
    import searchTeachers from "@/views/search/searchResult/searchTeachers/searchTeachers";
    import searchBlog from "@/views/search/searchResult/searchBlog/searchBlog";


    /**
     * @description 搜索结果组件
     * @property {String} searchContent 搜索内容
     * @property {String} type 搜索类型，0:课程，1:讲师，2:博客
     * @example <searchResult searchContent="" type=""/>
     */
    export default {
        name: "searchResult",
        components: {
            searchCourses, searchTeachers,searchBlog
        },
        props: {
            searchContent: {
                type: String,
                default: ''
            },
            type: {
                type: Number | String,
                default: ''
            }
        },
        data() {
            return {
                searchValue: '', //搜索的内容
                searchType: 0, //当前搜索的类型，0:课程，1:讲师，2:博客
                resultCount: 0, //搜索结果计数
                showFilter: true, //是否显示筛选器
                sortType: 0, //搜索结果排序方式
            }
        },
        methods: {
            // 初始化
            init() {
                this.searchType = this.getSearchType;
                this.searchValue = this.getSearchContent;
            },
            // 切换过滤器显示状态
            switchFilter() {
                this.showFilter = !this.showFilter;
            },
            // 选择搜索结果排序项
            selectSortType(index) {
                this.sortType = index;
                this.$refs.searchCourses.getSearchResult(index);
            },
            // 搜索结果列表组件的切换过滤器状态回调事件
            handleSwitchFilter(showFilter) {
                this.showFilter = showFilter;
            }
        },
        computed: {
            // 屏幕宽度实时数值
            windowWidth() {
                return this.$store.state.screenWidth + 5;
            },
            // 搜索类型的显示文字
            searchTypeText() {
                return ['课程', '讲师', '博客'][this.searchType];
            },
            // 映射props中的searchContent，强制在值变化时触发监听器
            getSearchContent() {
                return this.searchContent;
            },
            // 映射props中的type，强制在值变化时触发监听器
            getSearchType() {
                return Number(this.type);
            },
            // 搜索结果数量描述
            showResultCount() {
                return `共 ${this.resultCount} 个相关${this.searchTypeText}`;
            },
            sortList() {
                if (this.searchType === 0) {
                    return ['默认排序','最多观看','价格降序', '最多购买'];
                }
                else if (this.searchType === 1) {
                    return ['所有讲师'];
                }
                else  if(this.searchType ===2){
                  return ['默认排序']
                }
            },
            // 排序列表的显示文字
            currentSorted() {
                if (this.searchType === 0) {
                    return ['默认排序', '最受好评', '最多观看', '最新发布'][this.sortType];
                }
                else if (this.searchType === 1) {
                    return ['所有讲师'][this.sortType];
                }
            }
        },
        watch: {
            $route() {
                this.init();
            },
            getSearchContent(nval) {
                this.searchValue = nval;
            },
            getSearchType(nval) {
                this.searchType = nval;
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style lang="scss" scoped>
  @import "searchResult";
</style>